﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <el-container class="list_pagecontainer">
            <el-aside width="200px">
                <div>
                    <common-tree :tree-data="treeData" :tree-body-height="treeHeight" v-on:tree-node-click="nodeClick">
                    </common-tree>
                </div>
            </el-aside>
            <el-main>
                <el-container class="list_pagecontainer">

                    <el-header>
                        <el-row>
                            <el-col :span="24">
                                <div class="list_searchcontainer">
                                    表名:
                                    <el-input placeholder="请输入参数名称" v-model="tableName" class="list_searchinput">
                                    </el-input>
                                    数据库表名:
                                    <el-input placeholder="请输入参数名称" v-model="sqlTableName" class="list_searchinput">
                                    </el-input>
                                    <el-button type="primary" v-on:click="bindGrid" icon="el-icon-search">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-header>
                    <el-main>
                        <common-table :data="tableData" :page-Index="pageIndex" :page-Size="pageSize" :total="total"
                            :table-Height="tableHeight" :show-Delete="false" v-on:on-load="bindGrid"
                            v-on:on-pageindexchange="pageIndexChange" v-on:handle-edit="edit" ref="table">
                            <template slot="column">
                                <el-table-column prop="TableName" header-align="center" align="left" label="表名">
                                </el-table-column>
                                <el-table-column prop="SQLTableName" header-align="center" align="left" label="数据库表名">
                                </el-table-column>
                                <el-table-column prop="OrderNum" header-align="center" align="center" label="排序"
                                    width="100">
                                </el-table-column>
                            </template>
                            <template slot="opbefore">
                                <el-table-column prop="ColumnDetail" header-align="center" align="center" label="表结构"
                                    width="100">
                                    <template slot-scope="scope">
                                        <el-button type="danger" size="mini" v-on:click="columnDetail(scope.row)">表结构
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </template>
                        </common-table>
                    </el-main>
                    <el-footer>
                        <el-row>
                            <el-col :span="24">
                                <div class="list_opcontainer">
                                    <el-button type="primary" v-on:click="add">添加数据表</el-button>
                                    <el-button type="danger" v-on:click="batchDelete">删除选中</el-button>
                                    <el-button type="primary" v-on:click="importXML">导入XML</el-button>
                                    <el-button type="primary" v-on:click="exportXML">导出XML</el-button>
                                    <el-button type="primary" v-on:click="createCode">生成代码</el-button>
                                    <!-- <span style="color:red">提示：导入XML功能适用于开发阶段，正式环境同步表结构请使用生成的同步脚本</span> -->
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="display: none">
                            <common-upload controltype="import" :import-url="importXMLUrl" upload-button-text="导入XML"
                                import-buttonn-name="importxml" v-on:import-complate="importComplate">
                            </common-upload>
                        </el-row>
                    </el-footer>
                </el-container>
            </el-main>
        </el-container>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js") @Scripts.Render("~/Resource/component/tree/index.js")

</html>

<script>
    var treeUrl = GetRootPath() + "Frame/Group/Tree"
    var tableUrl = GetRootPath() + "Frame/Table/FindList"
    var createCodeUrl = GetRootPath() + "Frame/Table/GeneratCodeFile"
    var batchDeletetUrl = GetRootPath() + "Frame/Table/OperateBatchDelete"
    var pageData = {
        importXMLUrl: GetRootPath() + "Frame/Table/ImportXML",
        //data
        tableData: [],
        treeData: [],
        //page
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        //search
        tableName: "",
        sqlTableName: "",
        //css
        tableHeight: 0,
        treeHeight: 0,
        groupGuid: '',
    };
    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            bindTree();
            pageData.tableHeight = CaculateTableHeight();
            pageData.treeHeight = CaculatWindowHeight();
        },
        methods: {
            pageIndexChange: function (val) {
                this.pageIndex = val
            },
            bindGrid: function () {
                bindGrid();
            },
            add: function () {
                OpenTopDialog('tableadd', '添加数据表', 'Frame/Table/Add?GroupGuid=' + pageData.groupGuid, 600,
                    800, bindGrid)
            },
            edit: function (index, row) {
                OpenTopDialog('tableadd', '编辑数据表', 'Frame/Table/Edit?RowGuid=' + row.RowGuid, 600, 800,
                    bindGrid)
            },
            batchDelete: function () {
                var selectRow = this.$refs.table.getSelectRow();
                if (selectRow.length == 0) {
                    OpenWaring('提示', '请选择删除的数据')
                } else {
                    OpenConfirm('提示', '确认删除选中的数据？', function () {
                        var KeyGuidList = "";
                        selectRow.forEach(element => {
                            KeyGuidList += element.RowGuid + ";";
                        });
                        var data = {
                            KeyGuidList: KeyGuidList
                        }
                        JsonAjaxPost(batchDeletetUrl, JSON.stringify(data), function (data,
                            status) {
                            if (data.code == 0) {
                                OpenSuccess('提示', '删除成功！', bindGrid)
                            } else {
                                OpenFail('提示', '删除失败！')
                            }
                        })
                    })
                }
            },
            createCode: function () {
                var selectRow = this.$refs.table.getSelectRow();
                if (selectRow.length == 0) {
                    OpenWaring('提示', '请选择需要生成代码的数据表')
                } else {
                    OpenTopDialog('columnlist', '确认代码命名空间', 'Frame/Table/NameSpaceEdit', 400, 600,
                        function (ReturnValue) {
                            var KeyGuidList = "";
                            selectRow.forEach(element => {
                                KeyGuidList += element.RowGuid + ";";
                            });
                            var data = {
                                NameSpace: ReturnValue.namespace,
                                Prefix: ReturnValue.prefix,
                                KeyGuidList: KeyGuidList
                            }
                            JsonAjaxPost(createCodeUrl, JSON.stringify(data), function (data,
                                status) {
                                if (data.code == 0) {
                                    window.top.open(GetRootPath() +
                                        "Frame/Table/ReadCodeFile?FileID=" +
                                        data.FileID)
                                } else {
                                    OpenFail('提示', '生成代码失败！')
                                }
                            })
                        })

                }
            },
            nodeClick: function (data, checked, node) {
                pageData.groupGuid = data.id
                bindGrid();
            },
            columnDetail(row) {
                OpenTopDialog('columnlist', '编辑数据表', 'Frame/Column/List?TableGuid=' + row.RowGuid, 600, 1000,
                    bindGrid)
            },
            importXML: function () {
                document.getElementById('importxml').click()
            },
            importComplate: function (result) {
                if (result.code == 0) {
                    OpenSuccess('提示', '导入成功', bindGrid)
                } else {
                    OpenFail('提示', result.msg)
                }
            },
            exportXML: function () {
                var selectRow = this.$refs.table.getSelectRow();
                if (selectRow.length == 0) {
                    OpenWaring('提示', '请选择导出XML的数据')
                } else {
                    var KeyGuidList = "";
                    selectRow.forEach(element => {
                        KeyGuidList += element.RowGuid + ";";
                    });
                    var url = GetRootPath() + "Frame/Table/ExportXML?KeyGuidList=" + KeyGuidList;
                    window.open(url);
                }
            }
        }
    })

    function bindGrid() {
        var data = {
            PageIndex: pageData.pageIndex,
            PageSize: pageData.pageSize,
            SQLTableName: pageData.sqlTableName,
            TableName: pageData.tableName,
            GroupGuid: pageData.groupGuid
        }
        JsonAjaxPost(tableUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "tableData", data.data);
            Vue.set(pageData, "total", data.total)
        })
    }

    function bindTree() {
        var data = {
            GroupTag: "Table"
        }
        JsonAjaxPost(treeUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "treeData", data.tree);
        })
    }
</script>